<template>
	<view class="page">

		<view class="page-content ">
			<u-tabs :list="tabs" active-color="#70B52C" :is-scroll="false" :current="tabCur" @change="tabsChange"></u-tabs>
			<view class="line"></view>
			<view class="p13 pt15">
				<view class="bg-white mb20 bm pb20" v-for="(order,orderIndex) in dataList" :key="orderIndex" @click="toInfo(order)">
					<view class="u-flex" style="align-items: stretch;" v-for="(item,index) in order.items" :key="index">
						<image
							:src="item.picUrl"
							style="width: 200rpx;" mode="widthFix"></image>
						<view class="pl12 u-f1 u-flex u-f-jsb" style="flex-direction: column;">
							<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
								{{item.spuName}}
								<span style="color: #FF563B;">
									<text class="f24 activeColor" v-if="order.status==0">待付款</text>
									<text class="f24 activeColor" v-if="order.status==10">
										{{order.boxDeliverId?'已确认发货':'待发货'}}
									</text>
									<text class="f24 activeColor" v-if="order.status==20">待收货</text>
									<text class="f24" v-if="order.status==30">已完成</text>
								</span>
							</view>
							<view class=" u-flex u-f-jsb fz12 c9" style="width: 100%;">规格：{{item.skuName}}<span></span></view>
							<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
								￥{{item.price}}
								<span>x{{item.count}}</span>
							</view>


						</view>
					</view>

					<view class="fz14 u-flex u-f-jsb mt15">


						<view class="u-flex fz13">
							实付款<span class="fz16 u-font-bold">￥{{order.payPrice}}</span>
						</view>
						<view class="u-flex">
							<view class="btn" @click.stop="pay(order)" v-if="order.status==0">立即支付</view>
							<view class="btn" @click.stop="toReturn(order)" v-if="order.status==10">申请售后</view>
							<view class="btn" @click.stop="toReceive(order)" v-if="order.status==20">确认收货</view>
						</view>
					</view>


				</view>

				<view class="mt20">

					<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
				</view>
				<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
					暂无订单~
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				tabs: [{
						name: "全部",
						count: 0,
						value: '',
					},
					{
						name: "待付款",
						count: 0,
						value: 0,
					},
					{
						name: "待发货",
						count: 0,
						value: 10,
					},
					{
						name: "待收货",
						count: 0,
						value: 20,
					},
					{
						name: "已完成",
						count: 0,
						value: 30,
					}
				],
				loadStatus: 'more',
				scrollHeight: 300,
				dataList: [],
				page: 1,
			}
		},
		onLoad(e) {
			if (e.tab) {
				this.tabCur = e.tab
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.initData()
			})
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toInfo(item){
				uni.navigateTo({
					url:'/pages/user/order/info?id='+item.id
				})
			},
			toReceive(item) {
				this.$common.modelShow('提示', '确认已收到货吗?', () => {
					this.$api.orderReceive({
						id: item.id
					}, res => {
						if (res.code == 200) {

							this.$common.successToShow('确认成功', ress => {
								this.initData()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				});
			},
			del: function(item) { //删除



				this.$common.modelShow('提示', '确认取消该订单吗?', () => {

					this.$api.orderCancel({
						id: item.id
					}, res => {
						if (res.code == 200) {

							this.$common.successToShow('取消成功', ress => {
								item.status = 40
								this.initData()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				});
			},
			pay: function(item) { //立即付款
			
				this.$api.orderPay({
					id: item.payOrderId,
					returnUrl: ''
				}, res => {
					if (res.code == 200) {




						let info = JSON.parse(res.data.displayContent)
						// 唤起微信支付。
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timeStamp,
							nonceStr: info.nonceStr,
							package: info.packageValue,
							signType: info.paySign,
							paySign: info.paySign,
							success: (res) => {

								this.$common.successToShow('支付成功', ress => {
									this.initData()
								})
							}
						});
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			tabsChange: function(index) {
				this.tabCur = index;

				this.page = 1;
				this.list = [];
				this.initData();
			},
			initData() {
				this.page = 1
				this.list = [];
				this.getList()
			},
			getList: function() {
				//抽盒列表
				let data = {
					pageNo: this.page,
					status: this.tabs[this.tabCur].value,
					limit: this.limit,
				}
				this.loadStatus = 'loading'
				this.$api.orderList(data, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.list, ..._list]
						this.isEmpty = (this.list.length == 0 ? true : false);
						// 判断所有数据是否请求完毕
						if (res.data.total > this.list.length) {
							this.page++
							this.loadStatus = 'loadmore'
						} else {
							this.loadStatus = 'nomore'
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			loadMore: function() {
				console.log('aa')
				if (this.loadStatus == 'nomore') {
					return
				}
				this.loadStatus = 'loading';
				setTimeout(() => {
					this.getList();
					this.loadStatus = 'loadmore';
				}, 1000)
			},
		},

	}
</script>

<style lang="scss" scoped>
	.btn {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #fff;
		line-height: 64rpx;
		background: #70B52C;
		border-radius: 16rpx;
	}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.status1 {
		color: #E54440;
	}

	.status2 {
		color: #39959B;
	}

	.status3 {
		color: #333;
	}
</style>